<template>
  <div class="black-banner">
    <h1>virtual HW product protyping tool</h1>
    <p class="subtext">虚拟原型产品开发工具</p>
          <el-button 
        type="primary" 
        plain 
        @click="goBack" 
        class="back-button"
      >
        <i class="el-icon-back"></i> 返回
      </el-button>
  </div>
  <div class="tool-download-container">
    <div class="header-section">
      <el-card class="header-card">
        <h1>资料相关链接</h1>
      </el-card>
    </div>

    <div class="tool-list">
      <el-card 
        v-for="(tool, index) in tools" 
        :key="index" 
        class="tool-card"
        shadow="hover"
      >
        <div class="tool-header">
          <h3>{{ tool.name }}</h3>
          <el-tag :type="getTagType(index)" size="small">{{ tool.tag }}</el-tag>
        </div>
        <p class="tool-description">{{ tool.description }}</p>
        <div class="tool-footer">
          <el-button 
            type="primary" 
            size="small" 
            @click="visitWebsite(tool)"
            class="website-button"
          >
            访问官网
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

const tools = ref([
  // 保留6个工具数据，与之前相同
  {
    name: 'Renode',
    tag: '模拟平台',
    description: 'Renode 是一个开源的嵌入式系统模拟器，它能够在主机环境中模拟各种嵌入式硬件平台，开发者可以在没有实际硬件设备的情况下，对嵌入式系统进行开发、调试和测试。',
    website: 'https://renode.io/'
  },
  {
    name: 'STM32 MCUs',
    tag: '开发工具',
    description: 'STM32系列32位微控制器基于Arm® Cortex®-M处理器，旨在为MCU用户提供更高的开发自由度。该系列产品结合了高性能、实时功能、数字信号处理、低功耗/低电压操作和出色的连接性，同时保持高度集成和易于开发的特点。',
    website: 'https://www.st.com.cn/zh/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html'
  },
  {
    name: 'Tauri',
    tag: '构建框架',
    description: 'Tauri 是一个框架，用于为所有主要的桌面和移动平台构建小型、快速的二进制文件。开发者可以集成任何编译为 HTML、JavaScript 和 CSS 的前端框架来构建用户体验，同时在需要时利用 Rust、Swift 和 Kotlin 等语言进行后端逻辑。',
    website: 'https://tauri.app/'
  },
  {
    name: 'STM32CubeIDE',
    tag: '开发工具',
    description: 'STM32CubeIDE是一种高级C/C++开发平台，具有STM32微控制器和微处理器的外设配置、代码生成、代码编译和调试功能。它基于Eclipse®/CDT™框架和用于开发的GCC工具链，以及用于调试的GDB。',
    website: 'https://example.com/psalg2000'
  },
  {
    name: '嵌入式仿真实验教学平台',
    tag: '仿真平台',
    description: '嵌入式仿真实验教学平台是国际领先的基于芯片指令级仿真的嵌入式教学平台，面向院校、开发者提供线上仿真实验教学服务；平台主要实现了电路代码仿真和实验教学管理功能，满足相关专业从理论教学到项目开发的产、学、研需求。',
    website: 'https://app.puliedu.com/'
  },
  {
    name: 'Proteus',
    tag: '仿真软件',
    description: 'Proteus是著名的EDA工具，从原理图布图、代码调试到单片机与外围电路协同仿真，一键切换到PCB设计，真正实现了从概念到产品的完整设计。是世界上唯一将电路仿真软件、PCB设计软件和虚拟模型仿真软件三合一的设计平台，其处理器模型支持8051、HC11、PIC10/12/16/18/24/30/DSPIC33、AVR、ARM、8086和MSP430等',
    website: 'https://www.labcenter.com/'
  }
]);

const getTagType = (index) => {
  const types = ['', 'success', 'info', 'warning', 'danger'];
  return types[index % types.length];
};

const visitWebsite = (tool) => {
  if (tool.website) {
    window.open(tool.website, '_blank');
  } else {
    ElMessage.warning(`找不到 ${tool.name} 的官方网站`);
  }
};

const goBack = () => {
  router.go(-1); // 返回上一页
};
</script>

<style scoped>
.black-banner {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  color: white;
  padding: 20px 25px;
  border-radius: 4px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

.black-banner h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.black-banner .subtext {
  margin: 8px 0 0 0;
  color: #b0b0b0;
  font-size: 14px;
}

.tool-download-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.back-button {
  position: absolute;
  right: 20px;
  top: 20px;
}

.header-card {
  text-align: center;
  flex-grow: 1;
}

.header-card h1 {
  margin: 0;
  color: #303133;
}

.tool-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行两列 */
  gap: 20px;
}

.tool-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 200px;
}

.tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tool-header h3 {
  margin: 0;
  color: #409EFF;
}

.tool-description {
  flex-grow: 1;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 40px;
}

.tool-footer {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.website-button {
  transition: all 0.3s;
}

.website-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .tool-list {
    grid-template-columns: 1fr;
  }
  
  .header-section {
    flex-direction: column;
    position: relative;
  }
  
  .back-button {
    position: absolute;
    right: 0;
    top: 0;
    margin-bottom: 15px;
  }
}
</style>